/*
 * @Author: fhw
 * @Date: 2022-07-07 17:13:50
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-02-07 18:07:02
 * @Description: 发布面板
 */
import { computed, defineComponent, onMounted, PropType, reactive, ref, watch } from 'vue'
import { equals, isEmpty, isNil } from 'ramda'
import { OssData } from '@/components/upload'
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import './style.scss'
import { ArticleModule } from '@/store/modules/articleData'
import { FormArticleCategory, FormUpload } from '@/components'
import { ArticleInfo } from '..'
import { errorTips } from '@/utils'
const props = {
	visible: {
		type: Boolean as PropType<boolean>,
		required: true,
	},
	dataSource: {
		type: Object as PropType<ArticleInfo>,
		required: true,
	},
} as const
export default defineComponent({
	props,
	emits: ['close', 'submit'],
	setup(props, { emit }) {
		const articleTag = computed(() => {
			return ArticleModule.articleTag
		})
		const articleCategory = computed(() => {
			return ArticleModule.articleCategory
		})
		watch(
			() => props.visible,
			() => {
				if (props.visible && !isNil(props.dataSource)) {
					if (props.dataSource.category) {
						pageState.value.categoryName = props.dataSource.category
						const categoryId = articleCategory.value.find((item) =>
							equals(item.label, props.dataSource.category)
						)?.value
						pageState.value.categoryId = categoryId as string
					}
					pageState.value.tags = props.dataSource.tags
					pageState.value.abstract = props.dataSource.abstract
					pageState.value.imageUrl = props.dataSource.imageUrl
					pageState.value.status = props.dataSource.status
				}
			}
		)
		onMounted(() => {
			if (isEmpty(ArticleModule.articleTag)) {
				ArticleModule.getArticleTag()
			}
			if (isEmpty(ArticleModule.articleCategory)) {
				ArticleModule.getArticleCategory()
			}
		})
		const antdForm = ref<AntdFrom>()
		const rules = reactive({
			categoryId: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
			tags: [{ required: true, message: '必填项不能为空', type: 'array', trigger: 'change' }],
		})
		const pageState = ref<ArticleInfo>({
			tags: [],
			categoryId: null,
			categoryName: '',
			abstract: '',
			imageUrl: '',
		})
		function onClose() {
			emit('close')
		}
		async function onSubmit() {
			const ok = await antdForm.value?.validate().then(
				() => null,
				() => true
			)
			if (ok) {
				return
			}
			emit('submit', pageState.value)
		}
		return () => (
			<>
				{props.visible && (
					<>
						<div class="panel-bg" onClick={onClose}></div>
						<div class="panel">
							<p class="title">发布文章</p>
							<a-form
								model={pageState.value}
								rules={rules}
								ref={antdForm}
								labelCol={{ span: 6 }}
								wrapperCol={{ span: 16 }}
								style="padding: 20px 0"
							>
								<a-form-item label="分类" name="categoryId">
									<FormArticleCategory
										v-models={[
											[pageState.value.categoryId, 'value'],
											[pageState.value.categoryName, 'label'],
										]}
									/>
								</a-form-item>
								<a-form-item label="添加标签" name="tags">
									<a-select
										v-model={[pageState.value.tags, 'value']}
										mode="tags"
										style="width: 100%"
										token-separators={[',']}
										placeholder="Automatic tokenization"
										options={articleTag.value}
										// onChange={(value: string) => {
										// 	console.log(`selected ${value}`, pageState.value.tags, articleTag.value)
										// }}
									></a-select>
								</a-form-item>
								<a-form-item label="文章封面" class="">
									{isNil(pageState.value.imageUrl) || isEmpty(pageState.value.imageUrl) ? (
										<>
											<FormUpload
												v-slots={{
													text: () => (
														<div>
															<p>
																<PlusOutlined />
															</p>
															<p style={{ color: '#909090' }}>上传封面</p>
														</div>
													),
												}}
												onChange={(data: OssData) => {
													if (!data.url) {
														errorTips('上传失败，请联系管理员处理')
														return
													}
													pageState.value.imageUrl = data.url
												}}
											/>
											<p class="advice">建议尺寸：1303*734px</p>
										</>
									) : (
										<div class="image-box">
											<img src={pageState.value.imageUrl} />
											<button
												class="del flexBox"
												onClick={() => {
													pageState.value.imageUrl = ''
												}}
											>
												{' '}
												<DeleteOutlined />{' '}
											</button>
										</div>
									)}
								</a-form-item>
								<a-form-item label="编辑摘要">
									<a-textarea
										v-model={[pageState.value.abstract, 'value']}
										placeholder="个性签名"
										autosize={{ minRows: 5, maxRows: 5 }}
										rows={5}
										showCount
									/>
								</a-form-item>
							</a-form>
							<div class="footer centerBox rightBox">
								<a-button onClick={onClose}>取消</a-button>
								<a-button type="primary" onClick={onSubmit}>
									确认并{equals(pageState.value.status, 0) ? '发布' : '更新'}
								</a-button>
							</div>
						</div>
					</>
				)}
			</>
		)
	},
})
